import Link from "next/link";
import { type BillingInvoices, getBillingInvoices, getViewerSession } from "@/lib/popiart-api";
import { type Locale } from "@/lib/site-content";

export default async function BillingSuccessPage({
  params,
  searchParams,
}: {
  params: Promise<{ locale: string }>;
  searchParams: Promise<{ kind?: string; provider?: string; trade_no?: string }>;
}) {
  const { locale } = await params;
  const { kind, provider, trade_no: tradeNo } = await searchParams;
  const typedLocale = locale as Locale;
  const isZh = typedLocale === "zh";
  const session = await getViewerSession();
  let invoices: BillingInvoices | null = null;

  if (session && tradeNo) {
    try {
      invoices = await getBillingInvoices({ keyword: tradeNo, page: 1, pageSize: 10 });
    } catch {
      invoices = null;
    }
  }

  const matchedOrder =
    (invoices?.subscription_orders.items || []).find((item) => String(item.trade_no || "") === String(tradeNo || "")) ||
    (invoices?.point_orders.items || []).find((item) => String(item.trade_no || "") === String(tradeNo || ""));

  return (
    <div className="page-stack">
      <section className="section-panel hero-tight">
        <div className="section-heading">
          <div className="eyebrow">{isZh ? "PAYMENT" : "PAYMENT"}</div>
          <h1>{isZh ? "支付已完成" : "Payment completed"}</h1>
          <p>
            {isZh
              ? "订单状态已切换为成功。你可以继续回到控制台或账单中心查看最新订阅、积分和订单历史。"
              : "The order has completed successfully. Continue to the console or billing center to review the latest subscription, credits, and order history."}
          </p>
        </div>
      </section>

      <section className="console-surface-card">
        <div className="section-heading compact">
          <h2>{isZh ? "支付结果" : "Payment result"}</h2>
        </div>
        <div className="table-list">
          <div className="table-row">
            <div>
              <strong>{isZh ? "订单类型" : "Order kind"}</strong>
              <span>{kind || "-"}</span>
            </div>
            <div>
              <strong>{isZh ? "支付渠道" : "Provider"}</strong>
              <span>{provider || "-"}</span>
            </div>
          </div>
          <div className="table-row">
            <div>
              <strong>{isZh ? "交易号" : "Trade no"}</strong>
              <span>{tradeNo || "-"}</span>
            </div>
            <div>
              <strong>{isZh ? "状态" : "Status"}</strong>
              <span>{isZh ? "成功" : "Success"}</span>
            </div>
          </div>
          {matchedOrder ? (
            <>
              <div className="table-row">
                <div>
                  <strong>{isZh ? "订单标题" : "Order title"}</strong>
                  <span>{String(matchedOrder.plan_title || matchedOrder.package_name || "-")}</span>
                </div>
                <div>
                  <strong>{isZh ? "金额" : "Amount"}</strong>
                  <span>{String(matchedOrder.money || "-")} {String(matchedOrder.currency || "")}</span>
                </div>
              </div>
              <div className="table-row">
                <div>
                  <strong>{isZh ? "支付方式" : "Payment method"}</strong>
                  <span>{String(matchedOrder.payment_method || "-")}</span>
                </div>
                <div>
                  <strong>{isZh ? "完成时间" : "Completed at"}</strong>
                  <span>{String(matchedOrder.complete_time || "-")}</span>
                </div>
              </div>
            </>
          ) : null}
        </div>
        <div className="hero-actions">
          <Link className="button button-dark" href={`/${locale}/billing`}>
            {isZh ? "查看账单中心" : "Open billing"}
          </Link>
          <Link className="button button-light" href={`/${locale}/console`}>
            {isZh ? "前往控制台" : "Open console"}
          </Link>
        </div>
      </section>
    </div>
  );
}